<template>
	<div class="zh-examination-type">
		<nav-header></nav-header>

		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-right fr">
					<el-button type="primary" @click="newType('add')">新增</el-button>
				</div>
			</div>

			<div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
				<el-table
				    :data="listData"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      prop="name"
				      label="试卷类型"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="状态"
				      align="center"
				      show-overflow-tooltip>
                      <template slot-scope="scope">
                          {{scope.row.status == 1 ? '启用' : '禁用'}}
                      </template>
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="操作"
				      align="center"
				      width="200"
				      show-overflow-tooltip>
				      	<template slot-scope="scope">
                            <el-button @click="newType(scope.row)" type="text">编辑</el-button>
                            <el-button @click="changeStatus(scope.row)" type="text">{{scope.row.status == 1 ? '禁用' : '启用'}}</el-button>
                            <el-button @click="delete_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>
			</div>
		</div>

        <el-dialog 
            :close-on-click-modal="false" 
            :close-on-press-escape="false" 
            :visible.sync="showType" 
            :title="typeTitle" 
            class="addType" 
            width="550px">
			<el-form :model="typeForm" :rules="rules" ref="typeForm" status-icon label-position="left" label-width="100px">
			    <el-form-item label="试卷类型" prop="name">
			      	<el-input 
			      		v-model="typeForm.name" 
			      		autocomplete="off"
			      		clearable>
                    </el-input>
			    </el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
			    <el-button @click="showType = false">取消</el-button>
			    <el-button type="primary" @click="saveType('typeForm')">保存</el-button>			    
			</div>
		</el-dialog>

        <el-dialog 
            :close-on-click-modal="false" 
            :close-on-press-escape="false" 
            :visible.sync="showDel" 
            title="删除操作" 
            class="show-delete" 
            width="550px">
			<div style="text-align: center;padding: 30px 0;">该类型已创建试卷，删除类型前是否转移试卷？</div>

			<div slot="footer" class="dialog-footer">
			    <el-button @click="deleteTest">同时删除试卷</el-button>
			    <el-button type="primary" @click="showTransfer = true">转移</el-button>			    
			</div>
		</el-dialog>

        <el-dialog 
            :close-on-click-modal="false" 
            :close-on-press-escape="false" 
            :before-close="closeDel"
            :visible.sync="showTransfer" 
            title="试卷转移" 
            class="show-delete" 
            width="550px">
			<div style="padding: 10px 30px 20px">
                <p>要把试卷转移到哪个个类型？</p>
                <el-select v-model="typeId" placeholder="请选择类型">
                    <el-option v-for="(item, inx) in transList" :key="inx" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </div>

			<div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="transfer">转移</el-button>			    
			</div>
		</el-dialog>
	</div>
</template>
<script>
  	export default {
	    data() {
            return {
                showDel: false,
                showTransfer: false,
                showType: false,
                typeTitle: '',
                typeId: undefined,
                listData: [],
                loading:{
					status: false,
					txt: '获取数据...',
                },
                typeForm: {
                    id: null,
                    status: 1,
                    name: '',
                },
                delForm: {
                    id: undefined,
                    name: undefined
                },
                rules: {
                    name: [
                        { required: true, message: '请输入试卷类型', trigger: 'blur' },
                        { pattern: this.rules.spaceKey.reg, message: this.rules.spaceKey.msg, trigger: ['blur', 'change']}
                    ]
                }
            }
        },
        created() {
            this.getList();
        },
        computed: {
            transList() {
                let temp = [];

                temp = this.listData.filter(item => {
                    if (item.id == this.delForm.id) {
                        return false;
                    } else {
                        return item.status == 1;
                    }
                })

                return temp;
            }
        },
        methods: {
            /**
             * 获取试卷类型
             */
            getList() {
                this.loading.status = true;

            	let success = (res => {
            		this.loading.status = false;
            		this.listData = res.data;
            	})
                
            	this.$ajax.get('api/newtest/get_test_type', {params: {status: '1,2'}, func:{success: success}})
            },
            /**
             * 新增 / 编辑
             * @param {Object} val 新增标识
             */
            newType(val) {
                this.showType = true;

                if (val === 'add') {
                    this.typeTitle = '新增试卷类型';
                    this.typeForm.name = '';
                    this.typeForm.id = null;
                } else {
                    this.typeTitle = '编辑试卷类型';
                    this.typeForm.name = val.name;
                    this.typeForm.status = val.status;
                    this.typeForm.id = val.id;
                }

                this.$nextTick(() => {
                    this.$refs.typeForm.clearValidate();
                })
            },
            /**
             * 保存试卷类型信息
             */
            saveType(formName) {
                 this.$refs[formName].validate((valid) => {
			        if (valid) {
	            		let success = (res => {
	            			this.showType = false;
	                		this.$message.success(res.msg)
	            			this.getList();
                        });
                        
                        
	            		if(this.typeForm.id) {
                            const params = {
                                id: this.typeForm.id,
                                status: this.typeForm.status,
                                name: this.typeForm.name
                            }

	            			this.$ajax.put('api/newtest/update_test_type', params, {func: {success: success}})
	            		} else {
                            const params = {
                                name: this.typeForm.name
                            }
                            
	            			this.$ajax.post('api/newtest/add_test_type', params, {func: {success: success}})
	            		}
			        } else {
			            return false;
			        }
			    });
            },
            /**
             * 改变试卷类型状态 
             */
            changeStatus(obj) {
                let self = this;
                let status = obj.status;
                let name = status == 1 ? '禁用' : '启用';

                let yes = (data => {
					let success = (res => {
                        self.$message.success(res.msg)
                        self.getList();
                    });
                    let params = {
                        id: obj.id,
                        name: obj.name,
                        status: status == 1 ? 2 : 1
                    }

                    self.$ajax.put('api/newtest/update_test_type', params, {func: {success: success}})
				})
                let cancel = ( ata => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: '确定将' + obj.name + ' 设置为' + name + '吗？'});
            },
            /**
             * 确认是否删除
             * @param {Number} id 删除id
             */
            delete_confirm(obj) {
                let yes = (res => {
                    this.delForm.id = obj.id;
                    this.delForm.name = obj.name;
                    let self = this;
					setTimeout(() => {
                        self.showDel = true;
                    }, 300);
				})
                let cancel = (res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt:'确定要删除该试卷类型吗？'});
            },
            /**
             * 删除试卷
             */
            deleteTest() {
                let success = (res => {
                    this.showDel = false;
		    		this.$message.success(res.msg);
					this.getList();
                });
                let params = {
                    id:  this.delForm.id,
                    name:  this.delForm.name,
                    status: 0
                }

		    	this.$ajax.put('api/newtest/update_test_type', params, {func: {success: success}})
            },
            /**
             * 转移试卷
             */
            transfer() {
                let success = (res => {
		    		this.$message.success(res.msg);
                    this.closeDel();
					this.getList();
                });
                let params = {
                    now_test_type: this.delForm.id,
                    new_test_type: this.typeId
                }

		    	this.$ajax.put('api/newtest/change_test_type', params, {func: {success: success}})
            },
            /**
             * 关闭删除
             */
            closeDel() {
                this.showTransfer = false;
                this.showDel = false;
            }
        },
  	}
</script>
<style lang="scss">
	.zh-examination-type {
		
	}
</style>